<template>
  <div class="csg-select-wrapper">
    <div class="csg-select" :class="{ roundType: round, borderType: border }">
      <input
        class="csg-select-input"
        @focus="handleFocus"
        @keydown="handleKeydown"
        type="text"
        v-model="inputValue"
        placeholder="请选择"
      />
      <span class="iconfont icon-jinru"  @click="handleClick"></span>
    </div>
    <!-- 下拉菜单 -->
    <div v-show="isDropdownVisible" class="csg-select-dropdown">
      <div
        class="csg-select-dropdown-item"
        v-for="(item, index) in options"
        :key="index"
        @click="selectOption(item, index)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  round: {
    type: Boolean,
    default: false,
  },
  border: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: '请选择',
  },
  options: {
    type: Array,
    default: () => [],
  },
  modelValue: {
    type: [String, Number],
    default: '',
  },
  size: {
    type: String,
    default: 'medium',
    validator: (val) => {
      return val ? ['small', 'medium', 'large'].includes(val) : true;
    },
  },
});

const emit = defineEmits(['change']);

const isDropdownVisible = ref(false);
const inputValue = ref('');
const ignoreBlur = ref(false);
// 切换下拉菜单显示/隐藏
const toggleDropdown = () => {
  isDropdownVisible.value = !isDropdownVisible.value;
};

watch(
  () => props.modelValue,
  (newValue) => {
    inputValue.value = newValue;
  },
  { immediate: true }
);

// 选择选项并更新输入框内容
const selectOption = (item, index) => {
  inputValue.value = item.label;
  isDropdownVisible.value = false;
  emit('change',item)
  
};
const handleClick = (e: Event) => { 
    toggleDropdown();
};
const handleFocus = () => {
  toggleDropdown();
};
const handleBlur = () => {
  isDropdownVisible.value = false;
};
const handleKeydown = (e: KeyboardEvent) => {
  console.log('键盘按下---->', e);
};
</script>
<style lang="scss" scoped>
.csg-select-wrapper {
  position: relative;
}
.csg-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid rgb(0, 0, 0, 0.2);
  position: relative;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); // 轻微阴影
  transition: box-shadow 0.3s ease;
}
.csg-select:focus-within {
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3); // 聚焦时高亮
}
.csg-select-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
  padding-left: 8px;
}
.roundType {
  border-radius: 5px;
}
.iconfont {
  font-size: 14px;
  font-weight: 800;
  color: #999;
  transition: all 0.5s ease;
}

.csg-select:focus-within .iconfont {
  color: #000000; // 聚焦时改变图标颜色
  transform: rotate(90deg);
}

.csg-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); // 添加阴影
  z-index: 100;
  overflow-y: auto;
  border-radius: 6px; // 圆角边框
}

.csg-select-dropdown-item {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.csg-select-dropdown-item:hover {
  background-color: #f0f0f0; // 悬停背景色
}
</style>
